<template>
    <van-sticky>
        <van-nav-bar title="商品分类" />
    </van-sticky>

    <van-tree-select v-model:main-active-index="activeIndex" :items="items" style="height: 500px;" @click="proList">
        <template #content>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
                <van-card v-for="item in productlist" :key="item.id"  @click="btn(item.id)">
                    <template #thumb>
                        <img style="width: 88px;height: 88px;background-size: cover;background-repeat: no-repeat;" :src="item.thumb_cdn"/>
                    </template>
                    <template #title>
                        <div style="font-size: 15px;">商品：{{ item.name }}
                        </div>
                    </template>
                    <template #price>
                        <div style="font-size: 15px;">￥{{ item.price }} /
                            {{ item.unitid == 1 ? "个" : item.unitid == 3 ? "张" : "台" }}</div>
                    </template>
                </van-card>
            </van-pull-refresh>
        </template>
    </van-tree-select>

    <!-- 商品 -->
    <!-- <van-sticky class="content">
        <ul v-if="!productlist.value">
            <li v-for="item in productlist" :key="item.id">
                <router-link :to="{
                    path: '/product/product/info',
                    query: { proid: item.id },
                }">
                    <van-image width="100%" height="120" fit="cover" :src="item.thumb_cdn" />
                </router-link>
                <router-link :to="{
                    path: '/product/product/info',
                    query: { proid: item.id },
                }">
                    <p class="tit">{{ item.name }}</p>
                </router-link>
                <div class="price">
                    <p>
                        ￥{{ item.price }} /
                        {{ item.unitid == 1 ? "个" : item.unitid == 3 ? "张" : "台" }}
                    </p>
                </div>
            </li>
        </ul>
        <ul v-else>
            <li>没有商品</li>
        </ul>
    </van-sticky> -->


    <Footer />
</template>

<script setup>
import Footer from '@/components/common/Footer.vue';
import { onBeforeMount } from 'vue';
const { proxy } = getCurrentInstance();
const typelist = ref([]);
const productlist = ref([]);
const activeIndex = ref(0);
const items = ref([]);
const page = ref(1);
const count = ref(0);
onBeforeMount(() => {
    typelistData();
})

//提前加载第一个分类的数据
const proList = async () => {
    let data = {
        typeid: items.value[activeIndex.value].id,
        page: page.value
    }

    let result = await proxy.$post({
        url: "/product/product/slider",
        params: data
    });

    if (result.code == 1) {
        productlist.value = result.data.list;
        count.value = result.data.count;
        for (let item of productlist.value) {
            items.value[activeIndex.value].children.push(
                {
                    text: item.name,
                    id: item.id
                }
            )

        }
    }
}

//侧边栏分类
const typelistData = async () => {
    let result = await proxy.$post({
        url: "product/product/type",
    });
    if (result.code === 1) {
        typelist.value = result.data;
        for (let item of typelist.value) {
            items.value.push({
                text: item.name,
                id: item.id,
                children: []
            })
        }
        proList();
        // console.log(items.value);

    } else {
        proxy.$NotifyWarn({
            msg: result.msg,
        });
    }
}

//刷新
const refreshing = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        proxy.$showToast('刷新成功');
        refreshing.value = false;
    }, 1000);
}

//跳转页面
const btn = (proid) => proxy.$router.push({ path: '/product/product/info', query: { proid } });
</script>

<style scoped>
.content {
    margin-bottom: 60px;
}
</style>